<template>
      <!-- 商品信息 -->
  <div class="container">
    <div class="body_box">
      <div class="img_box">
        <img :src="goodsDetail.pic_url" :alt="goodsDetail.pic_url" />
      </div>
      <p class="price">￥{{ (goodsDetail.price / 100).toFixed(2) }}</p>
      <div class="goods_name">{{ goodsDetail.name }}</div>
      <p class="brands">品牌商：{{ goodsDetail.brand }}</p>
      <div class="express_prompt">
        <span>
          库存：<span>{{ goodsDetail.stock }}</span>
        </span>
        <span>免邮费 顺丰快递</span>
      </div>
      <div class="detail">
        <p class="title">商品详情</p>
        <!-- v-html  解析我们的html代码 -->
        <p class="content" v-html="goodsDetail.detail_info">
        </p>
      </div>
    </div>
  </div>
  <!-- 底部 -->
  <van-action-bar>
  <van-action-bar-icon :badge="store.count"  @click="router.push('/cart')"  icon="cart-o" text="购物车" />
  <van-action-bar-icon   @click="collect" :icon="goodsDetail.is_collect? 'star' : 'star-o'" :text="goodsDetail.is_collect  ? '已收藏' : '未收藏'" />
  <van-action-bar-button type="warning" @click="addCart" text="加入购物车" />
  <van-action-bar-button type="danger"  @click="router.push(`/address-list?goodsId=${route.params.id}`)" text="立即购买" />
</van-action-bar>
</template>
<script setup>
import {onMounted,reactive,ref} from 'vue'
import {getGoodsDetail} from '@/api/goods'
import {useRoute,useRouter} from 'vue-router'
import {collecdAdd,collecdDelete}  from '@/api/collect'
import { showNotify } from "vant";
import {cartAdd,cartList,cartEdit} from '@/api/cart'
import userCartInfo from '@/stores/userCartInfo'
onMounted(async ()=>{
  goodsDetail.value = (await getGoodsDetail({id:route.params.id})).data
  console.log(goodsDetail.value.collect);
})
let store = userCartInfo()
let router = useRouter()
let route = useRoute()
let goodsDetail = ref({})
let collect = async ()=>{
  console.log(goodsDetail.value.collect);
  if(goodsDetail.is_collect){
    await collecdDelete({type:'1',object_id:route.params.id})
       showNotify({
      type: "success",
      message: "取消收藏成功", 
      duration:1000,
 })

    goodsDetail.value.is_collect = false;
  }else{
     await collecdAdd({type:'1',object_id:route.params.id})
       showNotify({
      type: "success",
      message: "收藏成功", 
      duration:1000,
 })

    goodsDetail.value.is_collect = true;
  }
}
let addCart= async ()=>{
    let data = store.list.find((item) => item.goods_id == route.params.id);
  if (data) {
    // 购物车内存在当前商品  需要调用编辑接口 给当前商品数量加1
    //id 该商品在购物车内的编号   goods_id 商品编号   count 当前商品在购物车内的数量
    await cartEdit({id:data.id,goods_id:route.params.id,count:data.count+1})
    // showSuccessToast("添加至购物车成功");
    store.getCartInfo()
  } else {
    // 如果不存在直接调用添加接口 将当前商品添加至购物车
    await cartAdd({goods_id:route.params.id,count:1})
    // showSuccessToast("添加至购物车成功");
    // 触发 购物车仓库action  重新获取最新的购物车数据
    store.getCartInfo()
  }
}


</script> 
<style lang="scss" scoped>
// 内边距离
$pad: 8px;

.body_box {
  background-color: white;
  margin: 0 10px;
  .img_box {
    width: 100%;
    text-align: center;
    img {
      width: 100%;
    }
  }
  .goods_name {
    padding: 0 $pad;
    background-color: white;
    font-size: 18px;
  }
  .brands,
  .express_prompt {
    padding: 0 $pad;
    display: flex;
    justify-content: space-between;
    color: #999999;
    font-size: 14px;
    margin: 6px 0;
  }
  .price {
    padding: 0 $pad;
    color: #f63515;
    font-size: 22px;
    margin: 6px 0;
  }
  .detail {
    .title {
      margin: 10px 0;
      font-weight: bold;
      font-size: 14px;
      color: black;
      text-align: center;
    }
    .content {
      padding: 0 12px;
      font-size: 16px;
      color: rgb(84, 84, 84);
      text-indent: 2em;
    }
  }
}
</style>
